<template>
  <div class="params-container">
    <!-- 面包屑导航 -->
    <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>-->
    <bread :second="'商品管理'" :third="'参数列表'"></bread>
    <!-- 卡片 -->
    <el-card class="box-card">
      <div style="margin-top: 15px;">
        <el-alert style="margin:10px  0" title="注意：只允许为第三级分类设置相关参数！" type="warning" show-icon></el-alert>
        <!-- //级联选择器 -->
        选择商品分类：
        <el-cascader v-model="value" :options="cateCasList" :props="props" @change="handleChange"></el-cascader>
        <!-- ==={{value}}==={{activeName}}====={{cateId}} -->
        <!-- 标签页 -->
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="动态参数" name="many">
            <el-button type="primary" :disabled="disabled" @click="addParams()">添加参数</el-button>
            <el-table :data="manyData" border="" style="width: 100%">
              <el-table-column type="expand">
                <template slot-scope="scope">
                  <!-- <pre>{{scope.row}}</pre> -->
                  <el-tag
                    closable
                    style="margin:5px"
                    v-for="(item, index) in scope.row.attr_vals"
                    :key="index"
                    @close="delTag(index,scope.row)"
                  >{{item}}</el-tag>
                  <el-input
                    class="input-new-tag"
                    v-if="scope.row.inputVisible"
                    v-model="scope.row.inputValue"
                    ref="saveTagInput"
                    size="small"
                    style="width:120px"
                    @keyup.enter.native="handleInputConfirm(scope.row)"
                    @blur="handleInputConfirm(scope.row)"
                  ></el-input>
                  <el-button
                    v-else
                    class="button-new-tag"
                    size="small"
                    @click="showInput(scope.row)"
                  >+ New Tag11111</el-button>
                </template>
              </el-table-column>
              <el-table-column type="index" label="#"></el-table-column>
              <el-table-column prop="attr_name" label="日期" width="180"></el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    type="primary"
                    size="mini"
                    icon="el-icon-edit"
                    @click="handleEdit(scope.row)"
                  >编辑</el-button>
                  <el-button
                    icon="el-icon-delete"
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.row)"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="静态属性" name="only">
            <el-button type="primary" :disabled="disabled">添加属性</el-button>
            <el-table :data="onlyData" border="" style="width: 100%">
              <el-table-column type="expand">添加属性</el-table-column>
              <el-table-column type="index" label="#"></el-table-column>
              <el-table-column prop="attr_name" label="日期" width="180"></el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <pre>{{scope.row}}</pre>
                  <el-button
                    type="primary"
                    size="mini"
                    icon="el-icon-edit"
                    @click="handleEdit(scope.row)"
                  >编辑</el-button>
                  <el-button
                    icon="el-icon-delete"
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.row)"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
    <!-- 添加分类的表单对话框 -->
    <el-dialog title="添加参数" :visible.sync="dialogFormVisibleParams">
      <el-form ref="formDialogAddCate" :model="formParams">
        <el-form-item label="参数名称" label-width="120px">
          <el-input v-model="formParams.attr_name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleParams = false">取 消</el-button>
        <el-button type="primary" @click="addFormParams">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
           
<script>
import {
  cateList_api,
  cateParamsList_api,
  cateParamsDelete_api,
  cateAtteAdd_api,
  cateAddParams_api
} from '@/api'
export default {
  data() {
    return {
      cateCasList: [],
      /* 级联续择器 */
      value: [],
      props: {
        value: 'cat_id',
        label: 'cat_name',
        children: 'children'
      },

      /* 禁用按钮属性 */
      // disabled: true,
      /* 标签页 */
      activeName: 'many',
      onlyData: [],
      manyData: [],

      //添加属性
      inputValue: '',

      /* 添加参数 */
      dialogFormVisibleParams: false,
      formParams: {
        attr_name: ''
      }
    }
  },
  created() {
    this.getParamsCate()
  },
  methods: {
    //   添加分类
    async getParamsCate() {
      //获取父级分类
      const { data: res } = await cateList_api({ type: 3 })
      //console.log(res, 5555)
      this.cateCasList = res.data
    },

    /* 级联选择器上的事件 */
    async handleChange() {
      // console.log(1111)

      if (this.value.length == 3) {
        // this.disabled = false

        //  发送请求获取数据
        //  获取请求需要传递的两个参数  分类： id   参数类型  only  many
        //   arr=[1,2,3]=====最后一个值的索引：arr.length-1=====获取最后一个值：arr[arr.length-1]
        // var id = this.value[this.value.length - 1]
        // var sel = this.activeName
        // const { data: res } = await cateParamsList_api({ id, sel })
        // console.log(res, 5566)
        // //  判断到底获取的是动态参数还是静态属性
        // if (this.activeName == 'many') {
        //   this.manyData = res.data
        // } else {
        //   this.onlyData = res.data
        // }

        this.paramsFunc()
      } else {
        //this.disabled = true
        this.value = []
      }
    },

    //  发送请求获取参数或者属性的封装
    async paramsFunc() {
      // var id = this.value[this.value.length - 1]
      var sel = this.activeName
      const { data: res } = await cateParamsList_api({ id: this.cateId, sel })
      //console.log(res, 5566)
      //  判断到底获取的是动态参数还是静态属性

      //  给获取的数组中的每一项添加一个属性  inputVisible=false
      res.data.forEach(item => {
       // console.log(item, 5566666)
        item.inputVisible = false
        item.inputValue = ''
        item.attr_vals = item.attr_vals.split(',').filter(item=>item.length!=0)
      })

      if (this.activeName == 'many') {
        this.manyData = res.data
      } else {
        this.onlyData = res.data
      }
    },
    /* 标签页身上自带的事件 */
    handleClick(tab, event) {
      //console.log(tab, 8899999)
      this.paramsFunc()
    },

    /* 表格编辑和删除 */
    handleEdit() {},
    async handleDelete(row) {
      // console.log(row, 3333344444)
      const result = await this.$confirm(
        '此操作将永久删除该文件, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })

      // console.log(result, 88888)
      if (result == 'confirm') {
        //console.log(123321);
        const { data: res } = await cateParamsDelete_api({
          id: this.cateId,
          attrid: row.attr_id
        })
        //console.log(res,444444444);
        // var id = this.value[this.value.length - 1]
        //删除完成后重新渲染表格数据
        this.paramsFunc()
      }
    },

    //  表单和按钮的切换添加属性
    handleInputConfirm(row) {
      console.log(row, 1111)
      row.inputVisible = !row.inputVisible
      //  失去焦点需要做的
      /* 
      1、校验表单===防止表单输入为空
      2、直接发送请求
      
      */

      if (row.inputValue.trim().length == 0) {
        return
      }

      //  实现页面上的数据更新
      row.attr_vals.push(row.inputValue)
      row.inputValue = ''
      //  实现数据库中的数据更新
      this.attrAddFunc(row)

      //  重新获取数据刷新页面
      //this.paramsFunc()
    },

    //  添加属性函数的封装
    async attrAddFunc(row) {
      var paramsAddAttr = {
        id: this.cateId,
        attrId: row.attr_id,
        attr_name: row.attr_name,
        attr_sel: this.activeName,
        attr_vals: row.attr_vals.join(',')
      }
      const { data: res } = await cateAtteAdd_api(paramsAddAttr)
    },

    //  删除tag
    delTag(i, row) {
      console.log(i, row, 888999)
      //  根据索引删除第几项 并只删除一个
      row.attr_vals.splice(i, 1)

      //删除tag
      this.attrAddFunc(row)
    },

    //  表单和按钮切换显示
    showInput(row) {
      //console.log(1111)
      row.inputVisible = !row.inputVisible
      //  实现表单的聚焦
      console.log(this, 44444)

      //  $nextTick 等页面结构重新渲染完成后在执行
      this.$nextTick(() => {
        console.log(this.$refs.saveTagInput.$refs.input, 44444)
        this.$refs.saveTagInput.$refs.input.focus()
      })
      //console.log(this.$refs.saveTagInput,44444);
      //this.$refs.saveTagInput.$refs.input.focus()
    },

    /* 添加参数 */
    addParams() {
      this.dialogFormVisibleParams = true
    },

    //  添加参数的确认按钮
    async addFormParams() {
      const { data: res } = await cateAddParams_api({
        id: this.cateId,
        attr_name: this.formParams.attr_name,
        attr_sel: this.activeName
      })
      // console.log(res,5555);
      this.dialogFormVisibleParams = false
    }
  },
  computed: {
    //  使用计算属性获取按钮的禁用状态
    disabled() {
      if (this.value.length == 3) {
        return false
      } else {
        return true
      }
    },

    //  使用计算属性获取级联选择器的分类id
    cateId() {
      if (this.value.length == 3) {
        return this.value[2]
      } else {
        return null
      }
    }
  }
}
</script>
<style scoped lang='less'>
.params-container {
  .el-breadcrumb {
    margin-bottom: 20px;
  }
}
</style>